<template>
    <div class="minishop-mslb pt5">
        <div class="plr15" >
            <div class="search-area kitbox"> 
                <div class="flex1 kitbox ptb8">
                    <div class="left-border"></div>
                    <div class=" pl12 flex1 kitbox">
                        <div><van-icon class="" name="search" /></div>
                        <div class="flex1 pl18"><input type='text' :value="searchText" @input="onInput" @confirm="ListRoom(true)" confirm-type="search" placeholder="关键词" ></div>
                    </div>
                    <div class="right-border"></div>
                </div>
                <div class="fs-12 pr14 pt4 pl30" @click="link('/index/xzrq?from=1&startDate='+ startDate +'&endDate='+ endDate)">
                    <div><span class="c-c9994a">住</span><span class="c-333 pl15">{{startDate}}</span></div>
                    <div><span class="c-c9994a">离</span><span class="c-333 pl15">{{endDate}}</span></div>
                </div>
                <div class="pr12 icon-wrap">
                    &nbsp;
                    <div class="icon" ></div>
                </div>
            </div>
        </div>
        <van-tabs color="#c9994a"  :active="active" bind:change="onChange">
            <van-tab title="只看有房"></van-tab>
            <van-tab title="查看全部"></van-tab>
        </van-tabs>
        <div class="pt15">
            <ClList 
                :loading="loading"
                :finished="finished"
                finishedText="没有更多了"
                @load="ListRoom"
                :list="list">
                <div class="list plr15 pb15">
                    <div class="item   pb10" v-for="(item,i) in list" :key="i" @click="link('/pages/project2/spxq?id='+ item.prdId)">
                        <div class="inner">
                            <div class="photo">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="kitbox plr12 pt10">
                                <div class="flex1 f-bold fs-15 c-121212">{{item.title}}</div>
                                <div class="fs15 f-bold c-c9a35d">押金：{{item.deposit}}</div>
                            </div>
                            <div class="tags pt8 plr12">
                                <van-tag plain>会员免费</van-tag>
                            </div>
                            <div class="pt8 pb13 kitbox plr12">
                                <div class="flex1 pt2">
                                    <img mode="widthFix" class="v-middle w12" src="/static/images/xz.png" alt="">
                                    <span class="v-middle ml6 c-858585 fs-12">限住{{item.people}}人</span>

                                    <img mode="widthFix" class="v-middle w15 ml15" src="/static/images/chuang.png" alt="">
                                    <span class="v-middle ml6 c-858585 fs-12">{{item.bed}}张床</span>
                                </div>
                                <div><van-button @click="link('/index/msxqCheck?id='+ item.roomId +'&startDate='+ startDate +'&endDate='+ endDate)" type="primary" color="#cda058" size="small">立即预定</van-button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </ClList>
        </div>
    </div>
</template>

<script>
import roomApi from "@/api/api-room";

import houseApi from "@/api/api-house";

import userApi from '@/api/api-user'
import otherApi from '@/api/api-other'
import moment from '@/plugins/utils/moment.js'
import ClList from "@/components/ClList"
export default {
    data () {
        var next = moment().add(1, 'days')
            
        return {
            list: [],
            loading: false,
            finished: false,
            pageIndex: 0,
            pageSize: 20,
            startDateStr: moment().format("MM-DD"),
            endDateStr: next.format("MM-DD"),

            startDate: moment().format("YYYY-MM-DD"),
            endDate: next.format("YYYY-MM-DD"),

            active: 0,
            searchText : "",
            list: []
        }
    },
    watch: {
        '$store.getters.logined': {
            handler(n, o){
                if(n){
                    
                }
            }
        },
    },
    components: {
        ClList
    },
    onLoad(options){
        this.startDate = options.startDate || ""
        this.endDate = options.endDate || ""
        wx.removeStorageSync("search-mslb")
    },
    onShow(){
        if(wx.getStorageSync("search-mslb") == 1){
            this.startDate = wx.getStorageSync("search-mslb-startDate") || ""
            this.endDate = wx.getStorageSync("search-mslb-endDate") || ""
            this.startDateStr = moment(this.startDate).format("MM-DD");
            this.endDateStr = moment(this.endDate).format("MM-DD");
            this.ListRoom(true)
        }
        wx.removeStorageSync("search-mslb")
    },
    mounted () {
        this.initPage()
    },
    methods: {
        initPage(){
            this.ListRoom()
        },
        ListRoom(isReload){
            var vm = this
            if(isReload){
                this.pageIndex = 1
                this.finished = false
            } else {
                this.pageIndex++
            }
            this.loading = true
            roomApi.ListRoom({
                keyword: this.searchText,
                houseId: "",
                placeId: "",
                is_all: this.active==0? false : true,
                start_date: this.startDate,
                end_date: this.endDate,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res => {
                res = res.result
                this.finished = res.IsLastPage
                this.loading = false
                if(res.List){
                    res.List.forEach(v => {
                        v.deposit = v.deposit.toFixed(2)
                    });
                }
                
                if(isReload){
                    this.list = res.List || []
                } else {
                    this.list = this.list.concat(res.List || [])
                }
            })
        },
        onInput(e){
            this.searchText = e.mp.detail.value
        }
    },
    onShareAppMessage( options ){
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: "",// 默认是小程序的名称(可以写slogan等)
            path: '/pages/index/index',// 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: "",//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res){
                // 转发成功之后的回调
                if(res.errMsg == 'shareAppMessage:ok'){
                    wx.showToast({
                        title: "分享成功",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            fail: function() {
                // 转发失败之后的回调
                if(res.errMsg == 'shareAppMessage:fail cancel'){
                    // 用户取消转发
                
                }else if(res.errMsg == 'shareAppMessage:fail'){
                    // 转发失败，其中 detail message 为详细失败信息
                    wx.showToast({
                        title: "分享失败",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            complete: function () {
                
            }
        };
        // 来自页面内的按钮的转发
        if( options.from == 'button' ){
            　
        }
        // 返回shareObj
        return shareObj;
    },
}
</script>

<style  lang="scss">
@import './scss/mslb.scss';
</style>
